<template>
  <!-- 单曲夹 -->
  <div class="singleDir" v-title :data-title="$t('router.singleTitle')">
    <div class="main">
      <div class="box left">
        <h5>
          <el-button @click="openDialog('createFile')" type="primary">{{
            $t("public.create")
          }}</el-button>
        </h5>
        <ul
          v-infinite-scroll="loadUl"
          infinite-scroll-disabled="isLoadUl"
          infinite-scroll-delay="120"
          infinite-scroll-distance="10"
          infinite-scroll-immediate="false"
        >
          <li
            v-for="(item, index) of fileList"
            :class="index == fileIndex ? 'fileActive' : ''"
            @click="fileToggle(item, index)"
            :key="item.dirId"
          >
            <p :title="item.name" v-text="item.name"></p>
            <span>({{ item.nums }})</span>
          </li>
        </ul>
      </div>
      <div class="box right" v-if="fileList.length > 0">
        <div class="top">
          <div class="image">
            <el-image
              :src="newInfo.imgUrl"
              fit="contain"
              :preview-src-list="[newInfo.imgUrl]"
            >
              <div
                slot="placeholder"
                class="image-slot flex-center flex-column"
              >
                <i class="iconfont el-icon-loading"></i>
                <p>
                  {{ $t("public.loading") }}
                  <span class="dot">...</span>
                </p>
              </div>
              <div slot="error" class="image-slot flex-center">
                <img src="@/assets/images/defaultCover.png" />
              </div>
            </el-image>
          </div>
          <div class="info">
            <div class="title">
              <div v-if="inputVisible">
                <!-- @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm" -->
                <el-input
                  class="input-new-tag"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="medium"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleInputConfirm"
                  >{{ $t("public.save") }}</el-button
                >
                <el-button
                  class="clearBtn"
                  size="small"
                  @click.native="inputVisible = false"
                  >{{ $t("public.cancel") }}</el-button
                >
              </div>
              <div v-else>
                <h2 v-text="newInfo.name" contenteditable="true"></h2>
                <i class="el-icon-edit" @click="showInput"></i>
              </div>
            </div>
            <li class="info-text">
              <span>{{ $t("public.createTime") }}：</span
              >{{ utils.formateDate(newInfo.createTime) }}
            </li>
            <li>
              <el-button
                type="primary"
                v-if="
                  newInfo.dirId == playClipId && playClipId != null && playing
                "
                class="icon-button"
                size="small"
                @click="play('pauseAll')"
                ><svg-icon name="pause" class="icon icon-pause" />{{
                  $t("public.pause")
                }}</el-button
              >
              <el-button
                v-else
                type="primary"
                class="icon-button"
                size="small"
                @click="play('playAll')"
                ><svg-icon name="play" class="icon icon-play" />{{
                  $t("public.play")
                }}</el-button
              >
              <el-button
                type="primary"
                class="icon-button"
                size="small"
                @click="openConfirm('playList')"
                ><svg-icon name="play-list" class="icon icon-play-list" />{{
                  $t("public.addToPlaylist")
                }}</el-button
              >
              <el-button
                type="primary"
                class="icon-button"
                @click="openDialog('addSingles')"
                size="small"
                ><svg-icon name="add" class="icon icon-add" />{{
                  $t("main.addToSingleClip")
                }}</el-button
              >
              <el-button
                type="primary"
                @click="openConfirm('deleteDir')"
                icon="el-icon-delete-solid"
                size="small"
                >{{ $t("public.deleteClip") }}</el-button
              >
            </li>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="songListTable"
            :data="tableData"
            highlight-current-row
            @selection-change="handleSelectionChange"
            v-loading="fullscreenLoading"
            v-el-table-infinite-scroll="load"
            infinite-scroll-disabled="isPage"
            infinite-scroll-delay="120"
            infinite-scroll-immediate="false"
            height="100%"
          >
            <el-table-column type="selection" width="100"> </el-table-column>
            <el-table-column min-width="30">
              <template slot-scope="scope">
                <div
                  :class="
                    currentSong.trackId == scope.row.trackId && playing
                      ? 'playing'
                      : ''
                  "
                >
                  <svg-icon
                    @click="play('pause', scope.row)"
                    name="pause"
                    class="icon icon-pause"
                  />
                  <svg-icon
                    @click="play('play', scope.row)"
                    name="play"
                    class="icon icon-play"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('main.NOSingleName')"
              min-width="350"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
                &nbsp;
                <span
                  class="isWorkName"
                  @click="openWorkName(scope.row.trackId)"
                >
                  <svg-icon
                    :name="
                      scope.row.trackId == activeTrackId
                        ? 'on-detail'
                        : 'off-detail'
                    "
                    class="icon icon-off-detail"
                  />
                  {{
                    $i18n.locale === "zh"
                      ? scope.row.trackCtitle || scope.row.trackTitle
                      : scope.row.trackTitle
                  }}
                </span>
                <p
                  class="isWorkName"
                  v-if="scope.row.composer"
                  v-show="scope.row.trackId == activeTrackId"
                >
                  <span
                    class="isSingleName"
                    v-for="(i, idx) of scope.row.composer"
                    :key="idx"
                    v-text="
                      $i18n.locale === 'zh'
                        ? i.fullCname || i.fullName
                        : i.fullName
                    "
                  ></span>
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="timing"
              :label="$t('main.duration')"
            ></el-table-column>
            <el-table-column min-width="30">
              <template #header>
                <span
                  @click="openConfirm('removeDirChilds')"
                  class="icon el-icon-delete-solid"
                ></span>
              </template>
              <template slot-scope="scope">
                <span
                  @click="openConfirm('removeDirChild', scope.row.trackId)"
                  class="icon el-icon-delete-solid"
                ></span>
              </template>
            </el-table-column>
            <p class="el-icon-loading"></p>
          </el-table>
        </div>
      </div>
      <nice-empty v-else :emptyText="$t('public.noData')"></nice-empty>
    </div>
    <div class="page-wrap" v-show="isPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-size="params.pageSize"
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!--弹窗界面-->
    <el-dialog
      width="20%"
      :title="$t(textMap[dialogStatus])"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 创建单曲夹 -->
      <el-form
        v-if="this.dialogStatus == 'createFile'"
        :model="createFile"
        class="createFile"
        :rules="rules"
        ref="createFile"
      >
        <el-form-item :label="$t('main.singleClipName')" prop="name">
          <el-input
            class="input-new-tag"
            v-model="createFile.name"
            @keyup.enter.native="createData(dialogStatus)"
            :placeholder="$t('main.enterSingleClipName')"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 添加到单曲夹 -->
      <el-form
        v-if="this.dialogStatus == 'addSingles'"
        :model="addSingles"
        class="addSingles"
        :rules="rules"
        ref="addSingles"
      >
        <el-form-item prop="select">
          <el-select
            v-model="addSingles.select"
            clearable
            filterable
            :placeholder="$t('public.selectSingles')"
          >
            <el-option
              v-for="item in options"
              :key="item.dirId"
              :label="item.name"
              :value="item.dirId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="addSingles.select === '0'"
          :label="$t('public.newSingles')"
          prop="name"
        >
          <el-input
            class="input-new-tag"
            v-model="addSingles.name"
            maxlength="20"
            show-word-limit
            :placeholder="$t('main.enterSingleName')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="clearBtn" @click.native="dialogFormVisible = false">{{
          $t("public.cancel")
        }}</el-button>
        <el-button type="primary" @click="createData(dialogStatus)">{{
          $t("public.save")
        }}</el-button>
        <!-- <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> -->
      </div>
    </el-dialog>
    <!-- <drawer-list :isPlayer="true"></drawer-list> -->
  </div>
</template>

<script>
// import drawerList from "@/components/common/drawerList/Index";
import { mapMutations, mapGetters, mapActions } from "vuex";
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  data() {
    return {
      fileList: [], //文件夹
      fileIndex: 0,
      tableData: [],
      fullscreenLoading: false,
      isLoadUl: false,
      multipleSelection: [], //多选
      activeTrackId: -1, // 单曲ID 展开workName
      // 当前选中行
      currentRow: null,
      // el-dialog相关
      textMap: {
        // 添加与编辑界面
        createFile: "main.addSingleClip", //this.$t('public.edit')
        addSingles: "main.addToSingleClip",
      },
      options: [], //单曲夹下拉
      dialogFormVisible: false, //弹窗
      dialogStatus: "", //编辑框界面切换
      // 添加单曲夹弹窗信息
      addSingles: {
        select: "",
        name: "",
      },
      createFile: {
        name: "",
        type: 2, //类型:1.唱片夹,2.单曲夹
      },
      params: {
        type: 2,
        // 1.唱片夹,2.单曲夹
        pageSize: 20,
        // 当前页数
        pageNum: 1,
        // code: "",
      },
      isPage: false, //显示加载更多或分页
      total: 0, //总条数
      isOnce: true, // load时防止重新赋值
      newInfo: {}, //当前文件夹top展示信息
      inputValue: "", //编辑标题展示字段
      inputVisible: false,
    };
  },
  components: {
    // drawerList,
  },
  computed: {
    ...mapGetters([
      "isIE",
      "playing",
      "playLists",
      "currentSong",
      "playClipId",
    ]),
    rules() {
      return {
        select: [
          {
            required: true,
            message: this.$t("public.selectSingles"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("public.SinglesCannotEmpty"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {},
  created() {},
  mounted() {
    if (this.isIE) {
      this.params.pageSize = 50;
    }
    this.getSongSheetDir();
  },
  methods: {
    ...mapMutations({
      setPlayList: "SET_PLAYLIST",
      setPlayParentId: "SET_PLAY_PARENT_ID",
      setPlayClipId: "SET_PLAY_CLIP_ID",
    }),
    ...mapActions([
      // 点击选择播放
      "selectPlay",
      // 点击播放全部
      "playAll",
      "playStatus",
      "savePlayList",
      "clearPlayList",
    ]),
    //文件夹切换
    fileToggle(val, idx) {
      // this.isPage = false;
      this.params.pageNum = 1;
      this.fileIndex = idx;
      this.newInfo = val;
      this.getDirChildContent();
    },
    //分页 每页条数
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getDirChildContent();
    },
    //当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.tableData = [];
      this.getDirChildContent();
    },
    //获取文件夹
    async getSongSheetDir() {
      this.isLoadUl = false;
      try {
        let res = await this.$api.user.getDirList(this.params);
        if (res.code === 1000000 && res.source.length > 0) {
          this.fileList = res.source ? res.source : [];
          this.isOnce
            ? (this.newInfo = res.source[0])
            : (this.newInfo = res.source[this.fileIndex]);
          this.getDirChildContent();
          this.isOnce = false;
          if (res.size >= res.total) this.isLoadUl = true;
        } else if (res.code === 1000000 && res.source.length == 0) {
          this.fileList = [];
          this.newInfo = [];
          this.tableData = [];
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取单曲夹下内容
    async getDirChildContent() {
      this.fullscreenLoading = true;
      try {
        let params = Object.assign({ dirId: this.newInfo.dirId }, this.params);
        let res = await this.$api.user.getDirChildContent(params);
        if (res.code === 1000000) {
          this.tableData = res.source ? res.source : [];
          this.total = res.total;
          this.fullscreenLoading = false;
          if (res.size < 50 && res.size < res.total) {
            this.loading = true;
            this.isPage = false;
          } else {
            this.loading = false;
            this.isPage = true;
          }
        } else {
          this.fullscreenLoading = false;
          this.tableData = [];
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 打开弹窗界面
    async openDialog(type) {
      if (!this.$store.getters.loginStatu) {
        this.$notify.error({
          title: this.$t("public.sorry"),
          message: this.$t("public.loginPermission"),
          duration: 3000,
        });
        return;
      }
      this.dialogStatus = type;
      let res;
      if (type == "createFile") {
        this.dialogFormVisible = true;
      } else if (type == "addSingles") {
        if (this.multipleSelection.length > 0) {
          res = await this.$api.user.getDirList(this.params);
          if (res.code === 1000000) {
            this.options = res.source;
            this.options.unshift({
              name: this.$t("public.newSingles"),
              dirId: "0",
            });
          }
          this.dialogFormVisible = true;
        } else {
          this.$message({
            showClose: true,
            message: this.$t("public.selectAddSingle"),
            type: "warning",
          });
          return;
        }
      }
      this.$nextTick(() => {
        this.$refs[type].resetFields();
      });
    },
    //弹窗 提交按钮
    createData(type) {
      this.$refs[type].validate(async (valid) => {
        if (valid) {
          // let params = Object.assign(this.isToken, this[type]);
          if (type === "createFile") {
            if (this.createFile.name.trim() === "") {
              this.$message({
                showClose: true,
                message: this.$t("public.addRecordHolder"),
                type: "error",
              });
              return false;
            }
            let res = await this.$api.user.addDir(this[type]);
            if (res.code === 1000000) {
              this.fileIndex += 1;
              this.getSongSheetDir();
              this.$message({
                showClose: true,
                message: this.$t("public.addSuccess"),
                type: "success",
              });
              this.dialogFormVisible = false;
            } else if (res.code === 1700401) {
              this.$message({
                showClose: true,
                message: this.$t("public.singleExists"),
                type: "error",
              });
            }
          } else if (type == "addSingles") {
            //单曲夹
            let params;
            if (this.addSingles.select === "0") {
              let param = {
                name: this.addSingles.name,
                type: 2,
              };
              let res = await this.$api.user.addDir(param);
              if (res.code === 1000000) {
                params = {
                  userDirChildAdds: this.multipleSelection.map((item) => {
                    return Object.assign(
                      {},
                      { contentId: item.trackId },
                      { moduleId: item.musicAlbum.moduleId || "" }
                    );
                  }),
                  dirId: res.source,
                  type: 2,
                };
                this.fileIndex += 1;
              } else if (res.code === 1700401) {
                this.$message({
                  showClose: true,
                  message: this.$t("public.singleExists"),
                  type: "error",
                });
              }
            } else {
              params = {
                userDirChildAdds: this.multipleSelection.map((item) => {
                  return Object.assign(
                    {},
                    { contentId: item.trackId },
                    { moduleId: item.musicAlbum.moduleId || "" }
                  );
                }),
                dirId: this.addSingles.select,
                type: 2,
              };
            }
            let res = await this.$api.user.addDirChild(params);
            if (res.code === 1000000) {
              this.$message({
                showClose: true,
                message: this.$t("public.addSuccess"),
                type: "success",
              });
              this.getSongSheetDir();
              this.dialogFormVisible = false;
            }
          }
        }
      });
    },
    // Confirm弹框
    openConfirm(type, trackId) {
      if (!this.$store.getters.loginStatu) {
        this.$notify.error({
          title: this.$t("public.sorry"),
          message: this.$t("public.loginPermission"),
          duration: 3000,
        });
        return;
      }
      if (type == "playList" && this.multipleSelection == 0) {
        this.$message({
          showClose: true,
          message: this.$t("public.selectAddSingle"),
          type: "warning",
        });
        return;
      } else if (type == "removeDirChilds" && this.multipleSelection == 0) {
        this.$message({
          showClose: true,
          message: this.$t("public.selectDeleteSingle"),
          type: "warning",
        });
        return;
      }
      let text = "";
      if (type == "deleteDir") {
        text = this.$t("main.sureDeleteSingleClip");
      } else if (type == "playList") {
        text = this.$t("public.sureToAddToPlaylist");
      } else if (type == "removeDirChild") {
        // if (this.currentSong.trackId === trackId && this.playing) {
        //   this.$message({
        //     message: this.$t("public.cannotDeleteCurrentlyPlaying"),
        //     offset: 46,
        //     type: "warning",
        //     duration: 2000,
        //   });
        //   return;
        // }
        text = this.$t("public.deleteCurrentSingle");
      } else if (type == "removeDirChilds") {
        text = this.$t("public.deleteSelectSingle");
      }
      this.$confirm(text, {
        confirmButtonText: this.$t("public.confirm"),
        cancelButtonText: this.$t("public.cancel"),
        // type: "warning",
        showClose: false,
        center: true,
      })
        .then(async () => {
          let id = this.newInfo.dirId;
          if (type == "playList") {
            // this.utils.addArrItem(this.multipleSelection,{albumName: this.list.name},{albumCname: this.list.cname || this.list.name,})
            this.savePlayList({
              list: this.multipleSelection,
              location: "end",
            });
            this.$message({
              showClose: true,
              message: this.$t("public.singleAddedPlaylist"),
              type: "success",
            });
          } else if (type == "deleteDir") {
            await this.$api.user.deleteDir({ dirId: id });
            this.fileIndex > 0 ? (this.fileIndex -= 1) : 0;
            this.$message({
              showClose: true,
              message: this.$t("public.successfullyDelete"),
              type: "success",
            });
          } else if (type == "removeDirChild") {
            if (this.currentSong.trackId === trackId) {
              this.$message({
                message: this.$t("public.cannotDeleteCurrentlyPlaying"),
                offset: 46,
                type: "warning",
                duration: 2000,
                showClose: true,
              });
              return false;
            }
            let params = {
              dirId: id,
              contentIds: [trackId],
              selectState: 2, //未全选
            };
            await this.$api.user.removeDirChild(params);
            this.$message({
              showClose: true,
              message: this.$t("public.successfullyDelete"),
              type: "success",
            });
          } else if (type == "removeDirChilds") {
            // 播放列表包含 当前播放歌曲
            let idx;
            const flag = this.multipleSelection.some((item, index) => {
              if (item.trackId === this.currentSong.trackId) {
                idx = index;
                return true;
              }
            });
            // 包含并播放状态 -不清空
            if (flag && this.playing) {
              if (this.multipleSelection.length == 1) {
                this.$message({
                  message: this.$t("public.cannotDeleteCurrentlyPlaying"),
                  offset: 46,
                  type: "warning",
                  duration: 1500,
                  showClose: true,
                });
                return false;
              }
              this.multipleSelection.splice(idx, 1);
              // 设置播放列表为当前播放歌曲(循环播放)
              this.selectPlay({
                list: [this.currentSong],
                index: this.currentSong.trackId,
              });
            } else if (flag) {
              this.selectPlay({
                list: [],
                index: "0",
              });
            }
            let params = {
              dirId: id,
              contentIds: this.multipleSelection.map((item) => {
                return item.trackId;
              }),
              selectState:
                this.multipleSelection.length === this.tableData.length ? 1 : 2,
            };
            await this.$api.user.removeDirChild(params);
            this.$message({
              showClose: true,
              message: this.$t("public.successfullyDelete"),
              type: "success",
            });
          }
          this.getSongSheetDir();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //播放
    async play(type, item) {
      if (!this.$store.getters.loginStatu) {
        this.$notify.error({
          title: this.$t("public.sorry"),
          message: this.$t("public.loginPermission"),
          duration: 3000,
        });
        return;
      } else if (this.tableData.length == 0) {
        this.$message({
          showClose: true,
          message: this.$t("public.noSingleToPlay"),
          type: "warning",
        });
        return;
      }
      if (type == "playAll") {
        this.setPlayClipId(this.newInfo.dirId);
        this.setPlayParentId(null);
        if (this.multipleSelection.length > 0) {
          this.savePlayList({
            list: this.multipleSelection,
            location: "start",
          });
          this.selectPlay({
            list: this.playLists,
            index: this.multipleSelection[0].trackId,
          });
          this.$refs.songListTable.clearSelection();
        } else {
          // 添加到播放列表
          this.savePlayList({ list: this.tableData, location: "start" });
          this.playAll({
            list: this.playLists,
          });
        }
      } else if (type == "play") {
        this.setPlayClipId(this.newInfo.dirId);
        this.setPlayParentId(null);
        this.savePlayList({ list: this.tableData, location: "start" });
        this.selectPlay({
          list: this.playLists,
          index: item.trackId,
        });
      } else if (type == "pause" || type == "pauseAll") {
        // this.playAllID = null;
        this.playStatus(false);
      }

      // console.log(item);
      // if (type == "playAll") {
      //   this.playAllID = this.fileIndex;

      // } else if (type == "pauseAll") {
      //   this.playAllID = null;
      // } else if (type == "play") {
      //   this.selectPlay({
      //     list: this.tableData,
      //     index: item.trackId,
      //   });
      // } else if (type == "pause") {
      //   this.playStatus(false);
      // }
    },
    loadUl() {
      this.params.pageSize += 15;
      this.getSongSheetDir();
    },
    // 加载更多
    load() {
      this.params.pageSize += 15;
      this.getDirChildContent();
    },
    openWorkName(idx) {
      if (idx == this.activeTrackId) {
        this.activeTrackId = -1;
      } else {
        this.activeTrackId = idx;
      }
      // this.isWorkName = !this.isWorkName;
    },
    //多选事件
    handleSelectionChange(val) {
      // this.isIndeterminate =
      //   checkedCount > 0 && checkedCount < this.tableData.length;
      this.multipleSelection = val;
    },
    // 编辑标题
    showInput() {
      this.inputValue = this.newInfo.name;
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    async handleInputConfirm() {
      if (this.inputValue.trim() === "") {
        this.$message({
          showClose: true,
          message: this.$t("public.SinglesCannotEmpty"),
          type: "error",
        });
      } else if (this.inputValue === this.newInfo.name) {
        this.inputVisible = false;
      } else {
        let params = {
          dirId: this.newInfo.dirId,
          name: this.inputValue,
          type: 2,
        };
        let res = await this.$api.user.updateDirName(params);
        if (res.code === 1000000) {
          this.newInfo.name = this.inputValue;
          this.inputVisible = false;
        } else if (res.code === 1700401) {
          this.$message({
            showClose: true,
            message: this.$t("public.singleExists"),
            type: "error",
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.singleDir {
  // margin-bottom: 180px;
  .main {
    width: 100%;
    min-height: 580px;
    display: flex;
    justify-content: space-between;
    .box {
      background: #f5f5f5;
    }
    .left {
      width: 200px;
      min-height: 580px;
      > h5 {
        width: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        color: #666666;
        border-bottom: #e9e9e9 solid 1px;
        .el-button {
          width: 84px;
          height: 38px;
          margin: 10px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      > ul {
        > li {
          display: flex;
          align-items: center;
          padding: 0 16px;
          margin: 24px 0;
          cursor: pointer;
          p {
            max-width: 130px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &.fileActive {
            color: #a1322c;
          }
        }
      }
    }
    .right {
      width: calc(100% - 230px);
      min-height: 580px;
      .top {
        height: 224px;
        width: 100%;
        display: flex;
        margin: 32px 0;
        .el-image {
          width: 224px;
          height: 224px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .info {
          margin-left: 32px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > .title {
            > div {
              display: flex;
              align-items: center;
              .input-new-tag {
                width: 300px;
                margin-right: 10px;
              }
              i {
                margin-left: 10px;
                cursor: pointer;
              }
            }
          }
          .info-text {
          }
          > li {
            > .el-button,
            .icon-button {
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
      .table-box {
        min-height: calc(100% - 288px);
        .el-table {
          min-height: 50vh;
          // &.singleTable{
          //   min-height: calc(100%);
          // }
          .workIndex {
            margin: 0 6px;
          }
          .isWorkName,
          .el-icon-delete-solid {
            color: #000;
            cursor: pointer;
          }
          .isSingleName {
            margin-left: 30px;
            margin-top: 5px;
            font-size: 16px;
            color: #999999;
          }
          .icon-pause {
            display: none;
          }
          .playing {
            .icon-pause {
              display: flex;
            }
            .icon-play {
              display: none;
            }
          }
        }
      }
    }
  }
}
.page-wrap {
  float: right;
}
.el-dialog {
  .el-select {
    width: 100%;
  }
}
</style>
